<template>
  <div class="content">
    <pageHeaderNew title="共享"></pageHeaderNew>

    <div class="search-box">
      <div>
        <a-space>
          <a-input-search
            :style="{ width: '420px' }"
            placeholder="搜索"
            style="margin-bottom: 8px; max-width: 240px"
          />
        </a-space>
      </div>
    </div>
    <div class="table-box">
      <TableTurn :tableData="getTableData" ref="tableRef" :args="args">
        <a-table-column :width="80">
          <template #title> 序号 </template>
          <template #cell="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
        </a-table-column>
        <a-table-column :width="200" data-index="useFileName" title="文件名称">
        </a-table-column>
        <a-table-column :width="200" data-index="fileType" title="文件类型">
        </a-table-column>
        <a-table-column :width="200" data-index="" title="共享者">
        </a-table-column>
        <a-table-column :width="200" data-index="" title="操作">
          <template #cell="{ record }">
            <a-button type="text" @click="setPreview(record)">预览</a-button>
          </template>
        </a-table-column>
      </TableTurn>
    </div>
  </div>

  <FilePreview
    v-model:visible="PreviewModelVisible"
    ref="previewFileRef"
    v-if="previewFile.fileShow"
    :file="previewFile.fileMessage"
    @downLoadFile="downLoadFile"
  >
  </FilePreview>
</template>

<script lang="ts" setup>
import { getShareList } from '@/apis/document/documentCenter/index';

const getTableData = async (page: any) => {
  try {
    const res = await getShareList({ ...page });
    return Promise.resolve(res);
  } catch (err: unknown) {
    console.log(err);
  }
};

const previewFile = reactive({
  fileShow: false,
  fileMessage: {
    id: '',
    fileName: '',
    downloadUrl: ''
  }
});
const PreviewModelVisible = ref(false);

const setPreview = (val: any) => {
  previewFile.fileMessage.id = val.id;
  previewFile.fileMessage.fileName = val.fileName;
  previewFile.fileMessage.downloadUrl = val.downloadPath;
  previewFile.fileShow = true;
  PreviewModelVisible.value = true;
};
</script>

<style scoped lang="less">
.content {
  padding: 10px;
  height: 100%;
  width: 100%;
}

.search-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 96%;
  margin: 10px;
}

:deep(.arco-table-tr) {
  height: 40px;
}
:deep(.arco-table-th) {
  font-weight: bold;
  // font-size: 13px;
}
</style>
